<div class="zi_fen chantu layui-hide">
    <div class="men">
        <div class="xiaotit">项目收支</div>
        <div class="fen1 float-l wd50">
            <div class="float-l wd50">
                <div class="ffmg">
                    <div class="fftt1 fw700">收支差</div>
                    <div class="fftt2 fw700" id="zi_fen_balancefee">0</div>
                    <div class="fftt3">收入合计-支出合计</div>
                </div>
            </div>
            <div class="float-r wd50" style="margin: 0 auto">
                <div class="ffmg">
                    <div class="fftt1 fw700">项目毛利</div>
                    <div class="fftt2 fw700" id="zi_fen_xiangmaofee">0</div>
                    <div class="fftt3">收入合计-支出合计-公司垫资</div>
                </div>
            </div>
            <div class="float-r wd50" style="margin: 0 auto">
                <div class="ffmg">
                    <div class="fftt1 fw700">毛利率</div>
                    <div class="fftt2 fw700" id="zi_fen_xiangmaorate">0%</div>
                    <div class="fftt3">项目毛利/（项目收入-公司垫资）X100%</div>
                </div>
            </div>
        </div>
        <div class="fen2 float-l wd50">
            <div>
                <span class="float-l" style="padding-left: 59px;padding-bottom: 5px;font-weight: 700;">项目收入构成：</span>
                <span class="float-r" style="font-weight: 700;">合计收入：<span id="zi_fen_ziyingshoufee">0</span></span>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_shougou" style="height: 40px"></div>
            <div>
                    <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                        <span class="fanglan tuclr1"></span><span style="margin-left: 20px">工程回款：<span id="zi_fen_shougonghuifee">0</span></span>
                    </span>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                        <span class="fanglv tuclr2"></span><span style="margin-left: 20px">公司垫资：<span id="zi_fen_shougongdianfee">0</span></span>
                    </span>
            </div>
            <div class="clear"></div>

            <div>
                <span class="float-l" style="padding-left: 59px;padding-bottom: 5px;font-weight: 700;margin-top: 30px">项目支出构成：</span>
                <span class="float-r" style="font-weight: 700;">合计支出：<span id="zi_fen_ziyingzhifee">0</span></span>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_zhigou" style="height: 40px"></div>
            <div>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglan tuclr3"></span><span style="margin-left: 20px">项目付款：<span id="zi_fen_zhixiangfee">0</span></span>
                </span>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglv tuclr4"></span><span style="margin-left: 20px">项目费用报销：<span id="zi_fen_zhienbaofee">0</span></span>
                </span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="fen3" style="margin-top: 20px">
            <div>
                <div class="float-l fw700">月度现金收支</div>
                <div class="yuequ layui-form float-r fw700">
                    <input type="text" id="yuexianshouzhimonth" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_yuexianshouzhi" style="height: 350px"></div>
        </div>
        <div style="padding-left: 150px">
                <span class="float-l fangding" style="padding-top: 5px;">
                    <span class="fanglan tuclr5"></span><span style="margin-left: 20px">收入</span>
                </span>
            <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglv tuclr6"></span><span style="margin-left: 20px">支出</span>
                </span>
        </div>
        <div class="clear" style="padding-top: 30px"></div>
    </div>

    <div class="xiaoxian"></div>
    <div class="men">
        <div class="xiaotit">应收分析</div>
        <div class="float-l wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">收入分析</div>
                <div class="chart" id="zi_chart_shoufen" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr7"></span><span style="margin-left: 20px">收入合同金额：<span id="zi_fen_shimoney">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr8"></span><span style="margin-left: 20px">开票金额：<span id="zi_fen_kai_money">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr1"></span><span style="margin-left: 20px">结算金额：<span id="zi_fen_shijiemoney">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr2"></span><span style="margin-left: 20px">工程回款金额：<span id="zi_fen_shougonghuifee2">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="yingshou float-l wd50">
            <div class="fw700" style="padding-bottom: 10px;padding-left: 15px">应收分析</div>
            <div class="bbfang float-l bbflv">
                <div style="margin-top: 16px">按合同应收未收</div>
                <div class="fw700"><span id="zi_fen_daihuifee_anhe">0</span></div>
            </div>
            <div class="bbfang float-l bbfhuang">
                <div style="margin-top: 16px">按开票应收未收</div>
                <div class="fw700"><span id="zi_fen_daihuifee_ankai">0</span></div>
            </div>
            <div class="bbfang float-l bbflan">
                <div style="margin-top: 16px">按结算应收未收</div>
                <div class="fw700"><span id="zi_fen_daihuifee_anjie">0</span></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="xiaoxian"></div>
    <div class="men">
        <div class="xiaotit">项目保证金</div>
        <div class="float-l wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">缴纳保证金构成</div>
                <div class="chart" id="zi_chart_bondgou" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr3"></span><span style="margin-left: 20px">投标保证金：<span id="zi_fen_bond_tbbzjfee">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr4"></span><span style="margin-left: 20px">履约保证金：<span id="zi_fen_bond_lybzjfee">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr5"></span><span style="margin-left: 20px">农民工工资保证金：<span id="zi_fen_bond_nmggzbzjfee">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="bjt float-l wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">保证金缴退汇总</div>
                <div class="chart" id="zi_chart_bondjthui" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr6"></span><span style="margin-left: 20px">保证金合计缴纳：<span id="zi_fen_bondjiaofee">0</span></span>
                </div> <div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr7"></span><span style="margin-left: 20px">保证金合计退回：<span id="zi_fen_bondtuifee">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="xiaoxian"></div>
    <div class="men">
        <div class="xiaotit">项目备用金</div>
        <div class="fen1 float-l wd50">
            <div style="margin: 0 auto">
                <div class="ffmg" style="margin: 0 auto">
                    <div class="fftt1 fw700" style="padding-top: 20px">备用金余额</div>
                    <div class="fftt2 fw700"><span id="zi_fen_zhijieyufee">0</span></div>
                    <div class="fftt3">备用金借支-报销冲抵-备用金还款</div>
                </div>
            </div>
        </div>
        <div class="bjt float-r wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">备用金汇总</div>
                <div class="chart" id="zi_chart_jiehui" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr1"></span><span style="margin-left: 20px">备用金借支：<span id="zi_fen_zhijiefee">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr2"></span><span style="margin-left: 20px">备用金还款：<span id="zi_fen_zhijiehuanfee">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr3"></span><span style="margin-left: 20px">报销冲抵：<span id="zi_fen_zhijiedifee">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr4"></span><span style="margin-left: 20px">备用金余额：<span id="zi_fen_zhijieyufee2">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>


        <div class="clear" style="padding-top: 30px"></div>
    </div>
</div>
<script>

    layui.use(['laytp', 'form', 'laydate'], function() {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;
        var date = new Date();
        var year = date.getFullYear();
        lay('#yuexianshouzhimonth').each(function(){
            var date = new Date();
            laydate.render({
                elem: this
                ,type: 'month'
                ,range: true
                ,value: year+'-01 - '+year+'-12'
                ,done: function(value, date, endDate){
                    var thisObj = $(this)[0].elem;
                    setTimeout(function () {
                        dataLayerAfterSea(thisObj);
                    },200)
                    setTimeout(function () {
                        func_zi_fen('yuedu');
                    },200)
                }
            });
        });
    });


    function func_zi_fen(seatype='') {
        var yuexianshouzhimonth = $("#yuexianshouzhimonth").val() || '';
        facade.ajax({url: ask_engin_cha_zi_fen,data:{enginid:param_enginid,yuexianshouzhimonth:yuexianshouzhimonth}}).done(function(res){
            if (res.code === 2000) {
                var data = res.data;

                zi_chart_yuexianshouzhi('zi_chart_yuexianshouzhi', data);
                if(seatype == 'yuedu'){
                    return false;
                }


                $("#zi_fen_balancefee").html(parseFormatNum(data.balancefee));
                $("#zi_fen_xiangmaofee").html(parseFormatNum(data.xiangmaofee));
                $("#zi_fen_xiangmaorate").html(data.xiangmaorate+'%');

                $("#zi_fen_ziyingshoufee").html(parseFormatNum(data.ziyingshoufee));
                $("#zi_fen_shougonghuifee").html(parseFormatNum(data.shougonghuifee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目收款信息','shou_xiang/index.php?status=1&feilei_option=xmsr_gchk&enginid='+data.id);
                });
                $("#zi_fen_shougongdianfee").html(parseFormatNum(data.shougongdianfee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目收款信息','shou_xiang/index.php?status=1&feilei_option=xmsr_gsdz&enginid='+data.id);
                });
                zi_chart_shougou('zi_chart_shougou', data);

                $("#zi_fen_ziyingzhifee").html(parseFormatNum(data.ziyingzhifee));
                $("#zi_fen_zhixiangfee").html(parseFormatNum(data.zhixiangfee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目付款信息','zhi_xiang/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_zhienbaofee").html(parseFormatNum(data.zhienbaofee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目费用报销信息','zhi_enbao/index.php?status=1&enginid='+data.id);
                });
                zi_chart_zhigou('zi_chart_zhigou', data);




                $("#zi_fen_shimoney").html(parseFormatNum(data.shimoney)).addClass('colorlan').click(function () {
                    openNavPage('查看收入合同信息','contract_shi/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_kai_money").html(parseFormatNum(data.kai_money)).addClass('colorlan').click(function () {
                    openNavPage('查看项目开票信息','piao_kai/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_shijiemoney").html(parseFormatNum(data.shijiemoney)).addClass('colorlan').click(function () {
                    openNavPage('查看收入合同结算信息','contract_shi_jie/index.php?status=1&isreal=1&enginid='+data.id);
                });
                $("#zi_fen_shougonghuifee2").html(parseFormatNum(data.shougonghuifee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目收款信息','shou_xiang/index.php?status=1&feilei_option=xmsr_gchk&enginid='+data.id);
                });
                zi_chart_shoufen('zi_chart_shoufen', data);
                $("#zi_fen_daihuifee_anhe").html(parseFormatNum(data.daihuifee_anhe));
                $("#zi_fen_daihuifee_ankai").html(parseFormatNum(data.daihuifee_ankai));
                $("#zi_fen_daihuifee_anjie").html(parseFormatNum(data.daihuifee_anjie));

                $("#zi_fen_bond_tbbzjfee").html(parseFormatNum(data.bond_tbbzjfee)).addClass('colorlan').click(function () {
                    openNavPage('查看保证金缴纳信息','bond_jiao/index.php?status=1&feitype_option=wlk_bzj_tbbzj&enginid='+data.id);
                });
                $("#zi_fen_bond_lybzjfee").html(parseFormatNum(data.bond_lybzjfee)).addClass('colorlan').click(function () {
                    openNavPage('查看保证金缴纳信息','bond_jiao/index.php?status=1&feitype_option=wlk_bzj_lybzj&enginid='+data.id);
                });
                $("#zi_fen_bond_nmggzbzjfee").html(parseFormatNum(data.bond_nmggzbzjfee)).addClass('colorlan').click(function () {
                    openNavPage('查看保证金缴纳信息','bond_jiao/index.php?status=1&feitype_option=wlk_bzj_nmggzbzj&enginid='+data.id);
                });
                zi_chart_bondgou('zi_chart_bondgou', data);



                $("#zi_fen_bondjiaofee").html(parseFormatNum(data.bondjiaofee)).addClass('colorlan').click(function () {
                    openNavPage('查看保证金缴纳信息','bond_jiao/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_bondtuifee").html(parseFormatNum(data.bondtuifee)).addClass('colorlan').click(function () {
                    openNavPage('查看保证金退回信息','bond_tui/index.php?status=1&enginid='+data.id);
                });
                zi_chart_bondjthui('zi_chart_bondjthui', data);



                $("#zi_fen_zhijiefee").html(parseFormatNum(data.zhijiefee)).addClass('colorlan').click(function () {
                    openNavPage('查看备用金借支信息','zhi_jie/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_zhijiehuanfee").html(parseFormatNum(data.zhijiehuanfee)).addClass('colorlan').click(function () {
                    openNavPage('查看备用金还款信息','shou_huan/index.php?status=1&enginid='+data.id);
                });
                $("#zi_fen_zhijiedifee").html(parseFormatNum(data.zhijiedifee)).addClass('colorlan').click(function () {
                    openNavPage('查看项目费用报销信息','zhi_enbao/index.php?status=1&enginid='+data.id+'&isdi='+encodeURIComponent('是'));
                });
                $("#zi_fen_zhijieyufee").html(parseFormatNum(data.zhijieyufee));
                $("#zi_fen_zhijieyufee2").html(parseFormatNum(data.zhijieyufee));
                zi_chart_jiehui('zi_chart_jiehui', data);
            }
        });
    }



    function zi_chart_shougou(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {},
            color: [colors[1], colors[2]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '-44px',
                bottom: '-56px',
                left: '50px',
                right: '1px',
                containLabel: true
            },
            xAxis: {
                type: ''
            },
            yAxis: {
                type: '',
                data: ['']
            },
            series: [
                {
                    name: '工程回款',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.shougonghuifee]
                },
                {
                    name: '公司垫资',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.shougongdianfee]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_zhigou(chat_id,data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {},
            color: [colors[3], colors[4]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '-44px',
                bottom: '-56px',
                left: '50px',
                right: '1px',
                containLabel: true
            },
            xAxis: {
                type: ''
            },
            yAxis: {
                type: '',
                data: ['']
            },
            series: [
                {
                    name: '项目付款',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.zhixiangfee]
                },
                {
                    name: '项目费用报销',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.zhienbaofee]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_yuexianshouzhi(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[5], colors[6]],
            backgroundColor: '#FFFFFF',
            legend: {},
            tooltip: {},
            grid: {
                top: '15px',
                bottom: '1px',
                left: '1',
                right: '1',
                containLabel: true
            },
            dataset: {
                source: data.yuexianshouzhi
            },
            xAxis: { type: 'category' },
            yAxis: { name:'' },
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        mychat.setOption(option);
    }
    function zi_chart_shoufen(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[7], colors[8], colors[1], colors[2]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            grid: {
                top: '1px',
                bottom: '1px',
                left: '1px',
                right: '1px',
                containLabel: true
            },
            series: [
                {
                    name: '收入分析',
                    type: 'funnel',
                    left: 1,
                    top: 1,
                    bottom: 30,
                    width: '100%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 12
                        }
                    },
                    data: [
                        { value: data.shimoney, name: '收入合同金额' },
                        { value: data.kai_money, name: '开票金额' },
                        { value: data.shijiemoney, name: '结算金额' },
                        { value: data.shougonghuifee, name: '工程回款金额' },
                    ]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_bondgou(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[3], colors[4], colors[5]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '缴纳保证金构成',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        { value: data.bond_tbbzjfee, name: '投标保证金' },
                        { value: data.bond_lybzjfee, name: '履约保证金' },
                        { value: data.bond_nmggzbzjfee, name: '农民工工资保证金' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_bondjthui(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();

        option = {
            color: [colors[6], colors[7]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            grid: {
                top: '1px',
                bottom: '1px',
                left: '1px',
                right: '1px',
                containLabel: true
            },
            series: [
                {
                    name: '保证金缴退汇总',
                    type: 'funnel',
                    left: 1,
                    top: 1,
                    bottom: 30,
                    width: '100%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 12
                        }
                    },
                    data: [
                        { value: data.bondjiaofee, name: '保证金合计缴纳' },
                        { value: data.bondtuifee, name: '保证金合计退回' },
                    ]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jiehui(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '备用金汇总',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '50%'],
                    label: {
                        position: 'inner',
                        fontSize: 14
                    },
                    color:[colors[1]],
                    data: [
                        { value: data.zhijiefee, name: '借支'},
                    ]
                },
                {
                    name: '备用金汇总',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    color:[colors[2],colors[3],colors[4]],
                    data: [
                        { value: data.zhijieyufee, name: '余额' },
                        { value: data.zhijiedifee, name: '冲抵' },
                        { value: data.zhijiehuanfee, name: '还款' },
                    ]
                }
            ]
        };
        mychat.setOption(option);
    }


</script>

